<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
  <button>测试拦截器</button>

  <script>

    /* 
    axios请求拦截器  (是一个回调)
    在发请求之前直接的一个回调函数
    作用: 对所有的请求做统一的处理: 追加请求头 追加参数 界面loading提示等
    注意:可以指定多个请求拦截器  后指定的先执行

    asios响应拦截器 
    是得到响应之后执行的一组回调函数
    作用: 如果请求成功 对成功的数据进行处理 若请求失败 对失败进行统一的操作
    
    */

    // 添加请求拦截器
    axios.interceptors.request.use(
      config => {
        console.log('请求拦截器的成功回调', config);
        return config // 必须返回config
      },
      error => {
        console.log('请求拦截器的失败回调');
        return Promise.reject(error)
      }
    )


    // 添加响应拦截器
    axios.interceptors.response.use(
      function (response) {
        console.log('响应拦截器成功回调', response)
        return response;
      },
      function (error) {
        console.log('响应拦截器失败回调', error)
        return Promise.reject(error);
      }
    );

    const btn = document.querySelector('button');
    btn.onclick = function () {
      axios({
        url:'http://localhost:8081/delay-server/bbb',
        method:'post',
        params: {a: 1, b: 2},
        data: {c: 3, d: 4}
      }).then(
        response =>{
          console.log('具体请求的成功回调', response);
        },
        error =>{
          console.log('具体请求的失败回调', error)
        }
      )
    };
  </script>
</body>

</html>